<?php
/*
 * @Author: 波波
 * @Date: 2025-07-05 00:15:00
 * @Email: guqule2@yeah.net
 * @LastEditors: 波波
 * @LastEditTime: 2025-07-05 00:15:00
 * @Description: 丸子社区-专注分享交流的社区平台，连接你我 - 标签归档页
 * @Company: 丸子社区
 */

/**
 * Tag Template File
 *
 * @package WordPress
 * @subpackage wanzicms
 * @since 1.0.0
 */

get_header();
?>

<!-- 主内容区 -->
<main class="container mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-16 flex-grow">
    <!-- 面包屑导航 -->
    <div class="mb-8 animate-fade-in">
        <nav class="text-sm text-neutral-500">
            <a href="<?php echo esc_url(home_url('/')); ?>" class="hover:text-primary transition-colors">首页</a>
            <i class="fa fa-angle-right mx-2 text-xs"></i>
            <span class="text-neutral-700">标签: <?php single_tag_title(); ?></span>
        </nav>
    </div>

    <!-- 栏目标题区域 -->
    <section class="mb-12 text-center animate-slide-up">
        <h1 class="text-[clamp(1.75rem,4vw,2.5rem)] font-bold text-neutral-800 mb-4"><?php single_tag_title(); ?></h1>
        <div class="text-[clamp(1rem,1.5vw,1.1rem)] text-neutral-600 max-w-3xl mx-auto"><?php echo tag_description(); ?></div>
    </section>

    <!-- 文章列表和侧边栏 -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
        <div class="lg:col-span-9">
            <?php if (have_posts()) : ?>
                <!-- 文章网格 -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6">
                    <?php while (have_posts()) : the_post(); ?>
                        <div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow group animate-slide-up">
                            <div class="relative overflow-hidden">
                                <?php if (has_post_thumbnail()) : ?>
                                    <img src="<?php the_post_thumbnail_url('full'); ?>" alt="<?php the_title_attribute(); ?>" class="w-full h-[280px] object-cover object-center">
                                <?php else : ?>
                                    <?php $first_img = get_first_image_from_content();
                                    if ($first_img) : ?>
                                        <img src="<?php echo esc_url($first_img); ?>" alt="<?php the_title_attribute(); ?>" class="w-full h-[280px] object-cover object-center">
                                    <?php else : ?>
                                        <img src="https://picsum.photos/800/400" alt="<?php the_title_attribute(); ?>" class="w-full h-[280px] object-cover object-center">
                                    <?php endif; ?>
                                <?php endif; ?>
                            </div>
                            <div class="p-6">
                                <h3 class="text-xl font-bold text-neutral-800 mb-2"><a href="<?php the_permalink(); ?>" class="hover:underline">
                                    <?php the_title(); ?>
                                </a></h3>
                                <p class="text-neutral-600 mb-4"><?php echo wp_trim_words( get_the_content(), 20, '...' ); ?></p>
                                <div class="flex items-center text-sm text-neutral-500">
                                    <p class="mr-4"><?php the_author(); ?></p>
                                    <p><?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . '前'; ?></p>
                                    <p class="ml-4"><?php echo get_post_meta( get_the_ID(), 'post_views_count', true ) ? get_post_meta( get_the_ID(), 'post_views_count', true ) : 0; ?> 次浏览</p>
                                </div>
                            </div>
                        </div>
                    <?php endwhile; ?>
                </div>
                
                <!-- 分页 -->
                <div class="mt-12">
                    <?php
                    the_posts_pagination(array(
                        'mid_size'  => 2,
                        'prev_text' => __('<i class="fa fa-angle-left"></i>', 'wanzicms'),
                        'next_text' => __('<i class="fa fa-angle-right"></i>', 'wanzicms'),
                        'screen_reader_text' => __('文章导航'),
                    ));
                    ?>
                </div>

            <?php else : ?>
                <p class="text-center text-neutral-600 col-span-full">此标签下暂无文章。</p>
            <?php endif; ?>
        </div>

        <div class="lg:col-span-3">
            <?php include('sidebar.php'); ?>
        </div>
    </div>
</main>

<?php get_footer(); ?> 